<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发起群聊</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link href="/peopleList/css/style.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="/peopleList/js/jquery-3.3.1.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>
<script>
    $(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));
        var str = [];
        str.push(user.id)
        $.get("/users/private", function (data) {
            // var list = {list:data.sendUsers};//当前登录用户未读的信息
            var list1 = {list: data.otherUsers};//已关注用户的列表
            var userId;
            $("#listUser").renderValues(list1, {
                getHref: function (item, value) {
                    $(item).attr("data-did", value);
                }
            });
            $(".checkedBtn").click(function () {
                var dd = $(this).data("did");
                str.push(dd);
            })
        })

        //解决数组作为参数提交时参数名会拼上[]的问题
        jQuery.ajaxSettings.traditional = true;

        $("#submitBtn").click(function () {
            if ($("input[name='roomName']").val().trim() == "") {
                $(document).dialog({
                    type: 'notice',
                    infoText: '亲,聊天室名不能为空',
                    autoClose: 2000,
                    position: 'bottom'
                });
            } else {
                var roomName = $("input[name='roomName']").val();
                $.post("/chatRooms/create", {str: unique(str), roomName: roomName}, function (data) {
                    window.location.href = "/mine/groupChat.html";
                })
            }
        })

        //数组去重
        function unique(arr) {
            if (!Array.isArray(arr)) {
                console.log('type error!')
                return;
            }
            arr = arr.sort()
            var arrry = [arr[0]];
            for (var i = 1; i < arr.length; i++) {
                if (arr[i] !== arr[i - 1]) {
                    arrry.push(arr[i]);
                }
            }
            return arrry;
        }
    })
</script>
<body>


<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="/mine/message.html">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">发起群聊</span>
        </div>
        <button id="submitBtn" class="aui-navBar-item">
            确定
        </button>
    </header>
    <input type="text" name="roomName" placeholder="请输入聊天室名字">
    <section class="aui-scrollView">
        <div class="tab-panel" id="listUser">
            <div class="tab-panel-item tab-active" render-loop="list">
                <a class="aui-flex b-line total">
                    <span style="display: none" render-html="list.id"></span>
                    <div class="aui-look-img">
                        <img render-src="list.headImgUrl" alt="">
                    </div>
                    <div class="aui-flex-box">
                        <h3 render-html="list.nickName"></h3>
                    </div>
                    <input type="checkbox" class="checkedBtn" name="hobby" render-key="list.id" render-fun="getHref">
                </a>
            </div>
        </div>
    </section>
</section>
<link href="https://css.mafengwo.net/mobile/css/together/together.css?1526627473" rel="stylesheet" type="text/css"/>
<div class="fixed-btm">
    <div class="btn-group">
        <span class="space"></span>

        <a class="btn-join" role="button" id="checkAll">全选</a>
        <span class="space"></span>
        <span class="space"></span>
        <a class="btn-join" role="button" id="checkUnAll">取消全选</a>
    </div>
</div>
<script>
    $(function () {
        $("#checkAll").click(function () {
            $("input[name='hobby']").attr("checked", true);
        })
        $("#checkUnAll").click(function () {
            $("input[name='hobby']").attr("checked", false);
        })
    })
</script>

</body>
</html>
